<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>高德地图</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
        integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
        integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .map_container {
            width: 100vw;
            height: 100vh;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
        }
        .tool_container {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 3;
            padding: 5px;
            background-color: #FFFFFF;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div class="map_container" id="map_container"></div>
    <div class="tool_container">
        <h3 id="rotate"></div>
    </div>
    <script>
        let map
        let marker
        const L = window['L']
        const icon = ""
        function locationTo() {
            if (navigator.geolocation) {
                const options = {
                    enableHighAccuracy: true,
                    maximumAge: 1000
                }
                navigator.geolocation.getCurrentPosition((position) => {
                    const { longitude, latitude } = position.coords
                    console.log(longitude, latitude)
                    map.flyTo(L.latLng(Number(latitude), Number(longitude)), 18)
                    addMarker(longitude, latitude)
                }, (err) => {
                }, options)
            }
        }
        function addMarker(longitude, latitude) {
            const dom = document.createElement('div')
            let image = new Image()
            image.id = 'location_marker'
            image.src = icon
            image.width = 32
            image.height = 32
            dom.appendChild(image)
            marker = L.marker(L.latLng(Number(latitude), Number(longitude)), {
                icon: L.divIcon({
                    html: dom
                })
            }).addTo(map)
            initShake()
        }
        function initShake() {
            if (window.DeviceOrientationEvent) {
                window.addEventListener('deviceorientation', (e) => {
                    let img = document.getElementById('location_marker')
                    if(img) {
                        img.style.transform = `rotate(${e.alpha || 0}deg)`
                        document.getElementById('rotate').innerHTML = `当前旋转角度：${e.alpha || 0}`
                    }
                })
            } else {
                alert('暂不支持使用陀螺仪')
            }
        }
        function initMap() {
            const gaode = L.tileLayer("https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", {
                subdomains: ['1', '2', '3', '4']
            })
            map = L.map("map_container", {
                preferCanvas: true,
                center: L.latLng(30.3, 120.2),
                zoom: 12,
                maxZoom: 22,
                minZoom: 2,
                layers: [gaode]
            })
            locationTo()
        }
        initMap()
        
    </script>
</body>

</html>